<template>
  <view>
    <view class="grid-body mt-30" v-for="(item, index) in listData" :key="index">
      <view class="check grid-common">
        <view class="title flex">
          <text>{{ Number(index) + 1 > 9 ? Number(index) + 1 : `0${Number(index) + 1}` }}</text>
          <text class="tsk-name">{{ item.statusLabel }}</text>
          <text class="tsk-time">{{ item.startTime ? item.startTime.slice(0, 16) : '' }}</text>
        </view>
        <view class="flex text">
          <text class="text-label">任务名称：</text>
          <text> {{ item.name }}</text>
        </view>
        <view class="flex text">
          <text class="text-label">任务编号：</text>
          <text> {{ item.code }}</text>
        </view>
        <view class="flex text">
          <text class="text-label">润滑设备：</text>
          <text>{{ item.deviceName }}</text>
        </view>
        <view class="flex text"
          >润滑部门：
          <text>{{ item.deptName }}</text>
        </view>
        <view class="flex text"
          >润滑人员：
          <text>{{ item.userNames }}</text>
        </view>
        <view class="flex text"
          >润滑截止时间：
          <text>{{ item.endTime ? item.endTime.slice(0, 16) : '' }}</text>
        </view>
        <view class="flex text"
          >润滑状态：
          <text>{{ item.lubricationStatusLabel || '--' }}</text>
        </view>
        <view class="footer-wrap">
          <view class="content-wrap"> </view>
          <view class="button-wrap">
            <button class="button" style="width: 100px" @click="handleLubrication(item.id, 'READ')">查看</button>
            <button
              class="button button-orange"
              style="width: 100px"
              @click="handleLubrication(item.id, ['EXECUTE', 'CONFIRM'][tabType])"
            >
              {{ tabType ? '确认' : '执行' }}
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    tabType: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleLubrication(id, operate) {
      uni.navigateTo({
        url: `/pages/work/intelligentPatrolInspection/lubricationMatter/matterDetail?taskId=${id}&operate=${operate}&from=${
          ['TOBEEXECUTE', 'TOBECONFIRM'][this.tabType]
        }`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-body {
  background-color: transparent;
}

.grid-common {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    .tsk-name {
      text-indent: 30rpx;
    }
    .tsk-time {
      position: absolute;
      right: 15px;
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;
    align-items: baseline;
    text {
      //width: 76%;
      color: #333;

      &.text-grey {
        color: #999;
      }

      &.w-50 {
        width: 50%;
      }
    }
  }

  .text-label {
    word-break: keep-all;
    color: #999 !important;
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .bor-top {
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
